<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>user</title>
<script type="text/javascript">
	var layerPage;//弹出框关闭时用到
	function showShopTree() {
		layerPage = layer.open({
			title : "选择门店",
			type : 2,
			content : 'management/shop/shopTree'
		});
	}
	function showTreeData(treeNode) {
		$("#shopName").val(treeNode.name);
		$("#shopId").val(treeNode.id);
	}
	function upImage() {
		$("#imgForm").ajaxSubmit({
			dataType : "json",
			success : function(data) {
				if (data.success == true) {
					var url = data.msg;
					//alert(url);
					$("#imgId").attr("src", url);
					$("#photo").val(url);
				} else {
					alert(data.msg);
				}
			}
		});
	}
	$(function() {
		$("#vipForm").validate({
			rules : {
				"vipNo" : {
					required : true,
					isPhone : true,
					remote : { // 异步验证是否存在
						type : "POST",
						url : 'management/vip/isExist',
						data : {
							vipNo : function() {
								return $("#vipNo").val();
							}
						}
					}
				},
				"shopName" : {
					required : true
				},
				"phoneNo" : {
					isPhone : true
				},
				"name" : {
					maxlength : 10
				},
				"points" : {
					number : true,
					digits : true
				},
				"balance" : {
					number : true
				},
				"idNo" : {
					isIdCardNo : true
				}
			},
			messages : {
				"vipNo" : {
					required : "请输入账号",
					isPhone : "请输入正确的手机号码",
					remote : "该账号已经存在"
				},
				"name" : {
					maxlength : "名字不能超过10位"
				},
				"shopName" : {
					required : "请选择门店"
				},
				"phoneNo" : {
					isPhone : "请输入正确的手机号码"
				},
				"points" : {
					number : "请输入合法的数字",
					digits : "请输入整数"
				},
				"balance" : {
					number : "请输入合法的数字"
				},
				"idNo" : {
					isIdCardNo : "请输入正确的身份证号"
				}
			},
			errorPlacement : function(error, element) {//错误信息显示位置
				if (element.attr("name") == "shopName") {
					error.css("left", $(element).width() + 110);
					error.insertAfter(element);
				} else {
					error.insertAfter(element);
				}
			}
		});
		$("#submitBtn").on("click",function(){
			$("#vipForm").submit();
		});
	});
</script>
</head>

<body>
	<ol class="am-breadcrumb am-breadcrumb-slash am-padding"
		style="margin-bottom: 0px;">
		<li><a href="management/index">首页</a></li>
		<li><a href="management/vip/index">会员档案管理</a></li>
		<li class="am-active">新增</li>
	</ol>
	<div class="am-g">
		<div class="am-u-md-12">
			<div class="am-tabs am-margin">
				<ul class="am-tabs-nav am-nav am-nav-tabs">
					<li class="am-active"><a href="javascript:void(0)">会员基本信息</a></li>
				</ul>

				<div class="am-tabs-bd">
					<div class="am-tab-panel am-active">
						<div class="am-g">
							<div class="am-u-sm-12">
								<form id="imgForm" class="am-form am-form-horizontal am-block" action="management/file" method="post" enctype="multipart/form-data">
									<label class="am-u-sm-2 am-form-label">会员头像</label>
									<div class="am-u-sm-4 am-u-end">
										<img id="imgId" src="file/a.png" class="am-form-field">
										<div class="am-form-group am-form-file">
											<button type="button" class="am-btn am-btn-default">
												<i class="am-icon-cloud-upload"></i> 选择要上传的图片
											</button>
											<input name="imageFile" id="imageFile" onchange="upImage();" type="file" multiple>
										</div>
									</div>
								</form>
							</div>
							<div class="am-u-sm-12">
								<form id="vipForm" method="post" class="am-form am-form-horizontal" action="management/vip/save">
									<input type="hidden" name="photo" id="photo">
									<!-- <input type="hidden" name="vipId" id="vipId" value="${t.vipId }" class="am-form-field am-input-sm">会员id -->
									<input type="hidden" name="compId" id="compId" value="${t.compId }"><!-- 企业id -->
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">会员卡号</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" placeholder="输入你的手机号" name="vipNo" id="vipNo">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">所属门店</label>
										<div class="am-u-sm-4">
											<input type="text" id="shopName" name="shopName"readonly onclick="showShopTree();">
											<input type="hidden" id="shopId" name="shopId">
										</div>
										<label class="am-u-sm-1 am-form-label am-u-end am-text-left">
											<a href="javascript:void(0);" onclick="showShopTree(); return false;">选择</a>
										</label>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">姓名</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="name" id="name" value="${t.name }">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">性别</label>
										<div class="am-u-sm-4 am-u-end am-form-label am-text-left">
											<input type="radio" name="sex" value="M" checked="checked">男
											<input type="radio" name="sex" value="F"> 女
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">生日</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="birthday" id="birthday" value="<fmt:formatDate value='${t.birthday}' type="date" pattern="yyyy-MM-dd HH:mm:ss"/>" data-am-datepicker readonly>
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">积分</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="points" id="points" value="0">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">余额</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="balance" id="balance" value="0">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">手机</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="phoneNo" id="phoneNo">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">身份证号</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="idNo" id="idNo">
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">发质自然状况</label>
										<div class="am-u-sm-4 am-u-end">
											<t:dictSelect tabName="vip" colName="HAIR_NATURE_STATE" field="hairNatureState" id="hairNatureState"></t:dictSelect>
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">发质健康状况</label>
										<div class="am-u-sm-4 am-u-end">
											<t:dictSelect tabName="vip" colName="HAIR_HEALTH_STATE" field="hairHealthState" id="hairHealthState"></t:dictSelect>
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">头皮性质</label>
										<div class="am-u-sm-4 am-u-end">
											<t:dictSelect tabName="vip" colName="SCALP_STATE" field="scalpState" id="scalpState"></t:dictSelect>
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">头屑情况</label>
										<div class="am-u-sm-4 am-u-end">
											<t:dictSelect tabName="vip" colName="SCURF_STATE" field="scurfState" id="scurfState"></t:dictSelect>
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">头皮炎症状况</label>
										<div class="am-u-sm-4 am-u-end">
											<t:dictSelect tabName="vip" colName="SCALP_INFLAMMATION_STATE" field="scalpInflammationState" id="scalpInflammationState"></t:dictSelect>
										</div>
									</div>
									<div class="am-form-group">
										<label class="am-u-sm-2 am-form-label">建议下次购买商品时间</label>
										<div class="am-u-sm-4 am-u-end">
											<input type="text" name="suggestMdseNexttime" id="suggestMdseNexttime" value="<fmt:formatDate value='${t.suggestMdseNexttime}' type="date" pattern="yyyy-MM-dd HH:mm:ss"/>" data-am-datepicker readonly>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="am-margin">
				<button class="am-btn am-btn-primary am-btn-xs" type="button" id="submitBtn">
					<span class="am-icon-check"></span> 保存
				</button>
				<a href="javascript:;" onClick="javascript:history.back(-1);" class="am-btn am-btn-primary am-btn-xs"><span class="am-icon-times"></span> 取消</a>
			</div>
		</div>
	</div>
</body>
</html>
